<template>
  <view class="bill-order-page">
    <!-- 加载动效 -->
    <view v-if="isLoading" class="loading-overlay">
      <view class="loading-content">
        <view class="loading-spinner"></view>
        <text class="loading-text">{{ loadingText }}</text>
      </view>
    </view>
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <image class="back-icon" src="/static/Images/order/Fanhui.png" mode="aspectFit"></image>
      </view>
      <view class="title">话费充值</view>
      <view class="placeholder"></view>
    </view>

    <!-- 头部分类导航板块 -->
    <view class="category-navigation">

      
      <!-- 顶部标签 -->
      <scroll-view class="top-tags-scroll" scroll-x="true" show-scrollbar="false">
        <view class="top-tags">
          <view 
            class="tag-item" 
            :class="{ active: activeTopTag === (topTags.length - 1 - index) }"
            v-for="(tag, index) in topTags.slice().reverse()" 
            :key="index"
            @click="switchTopTag(topTags.length - 1 - index)"
          >
            <text class="tag-text">{{ tag.name }}</text>
          </view>
        </view>
      </scroll-view>
      
      <!-- 运营商图标区域 -->
      <view class="operator-section">
        <view class="operator-grid">
          <view 
            class="operator-item"
            :class="{ active: selectedOperator === goods.id }"
            v-for="goods in goodsList.slice(0, isExpanded ? goodsList.length : 5)" 
            :key="goods.id"
            @click="selectOperator(goods.id)"
          >
            <view class="operator-icon">
               <view class="icon-circle">
                 <image v-if="getFirstImage(goods.imgs)" :src="getFirstImage(goods.imgs)" class="category-icon" mode="aspectFit" />
                 <text v-else class="operator-name">{{ goods.goods_name.substring(0, 2) }}</text>
               </view>
             </view>
            <text class="operator-label">{{ goods.goods_name }}</text>
          </view>
        </view>
        
        <!-- 展开按钮 -->
        <view class="expand-section" @click="toggleExpand">
          <text class="expand-text">点击展开</text>
          <text class="expand-icon">{{ isExpanded ? '▲' : '▼' }}</text>
        </view>
      </view>
    </view>

    <!-- 今日数据统计 -->
    <view class="today-stats">
      <view class="stats-header">
        <view class="stats-title">
           <text class="title-text">今日数据</text>
           <image class="title-icon" src="/static/Images/order/Tongji.png" mode="aspectFit"></image>
         </view>
        <view class="stats-info">
          <text class="calculated-text">已计算</text>
          <text class="order-count">0</text>
          <text class="order-unit">单</text>
        </view>
        <view class="collapse-btn">
          <text>收起 ^</text>
        </view>
      </view>
      <view class="stats-content">
        <view class="stat-item">
          <view class="progress-circle">
            <view class="circle-bg">
              <view class="circle-fill" style="transform: rotate(324deg);"></view>
            </view>
            <text class="progress-text">90%</text>
          </view>
          <view class="stat-info">
            <text class="requirement">要求：</text>
            <text class="success-rate">成功率≥60%</text>
          </view>
        </view>
        <view class="stat-item">
          <view class="progress-circle">
            <view class="circle-bg">
              <view class="circle-fill" style="transform: rotate(270deg);"></view>
            </view>
            <text class="progress-text">75%</text>
          </view>
          <view class="stat-info">
            <text class="requirement">要求：</text>
            <text class="report-rate">上报率≥100%</text>
          </view>
        </view>
        <view class="stat-item">
          <view class="progress-circle">
            <view class="circle-bg">
              <view class="circle-fill" style="transform: rotate(270deg);"></view>
            </view>
            <text class="progress-text">75%</text>
          </view>
          <view class="stat-info">
            <text class="requirement">要求：</text>
            <text class="account-rate">到账率≥100%</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 省份选择 -->
    <view class="province-section">
      <view class="section-label">省份</view>
      <view class="province-selector">
        <view class="province-option" :class="{ selected: selectedProvince === 'all' && selectedProvinceList.length === 0 }" @click="selectProvince('all')">
          <text>全部</text>
        </view>
        <view class="province-option" :class="{ selected: selectedProvinceList.length > 0 && selectedProvince !== 'all' }" @click="showProvinceModal">
          <text>{{ provinceDisplayText }}</text>
          <text class="province-count" v-if="selectedProvinceList.length > 0">{{ provinceCountText }}</text>
        </view>
      </view>
    </view>
    
    <!-- 渠道选择 -->
    <view class="channel-section">
      <view class="section-label">渠道</view>
      <view class="channel-selector">
        <view class="channel-option" :class="{ selected: selectedChannel === 'all' && selectedChannelPlatforms.length === 0 }" @click="selectChannel('all')">
          <text>全部</text>
        </view>
        <view class="channel-option" :class="{ selected: selectedChannelPlatforms.length > 0 && selectedChannel !== 'all' }" @click="showChannelModal">
          <text>{{ channelDisplayText }}</text>
          <text class="channel-count" v-if="selectedChannelPlatforms.length > 0">{{ channelCountText }}</text>
        </view>
      </view>
    </view>

    <!-- 充值金额选择 -->
    <view class="recharge-section">
      <view class="section-title">选择面值</view>
      
      <!-- 面值选择网格 -->
      <view class="amount-grid">
        <view 
          class="amount-item"
          :class="{ selected: selectedSpec === spec.id }"
          v-for="(spec, index) in goodsSpecs" 
          :key="`${selectedOperator}-${spec.id}-${index}`"
          @click="selectSpec(spec)"
        >
          <view class="amount-value">{{ spec.name }}</view>
          <view class="amount-price">预估收益 ¥{{ spec.price }}</view>
        </view>
      </view>
    </view>
    <view class="recharge-section">
    <!-- 结算信息列表 -->
      <view class="section-header">可抢订单</view>
      <view class="settlement-info">
        <view class="settlement-list">
          <view 
            v-for="(item, index) in availableOrders" 
            :key="index" 
            class="settlement-item-row"
            :class="{ 'selected-order': index === selectedOrderIndex }"
            @click="selectOrder(index)"
          >
            <view class="item-left">
              <text class="item-label">预计结算单价：</text>
              <text class="item-price">¥{{ item.price }}</text>
            </view>
            <view class="item-right">
                <text class="item-quantity">订单量：{{ item.count }}</text>
                <view class="status-badge" :class="{ 'status-selected': index === selectedOrderIndex, 'status-unselected': index !== selectedOrderIndex }">
                  <text class="status-icon" v-if="index === selectedOrderIndex">✓</text>
                </view>
              </view>
          </view>
          <view v-if="availableOrders.length === 0" class="empty-state">
            <text class="empty-text">暂无可抢订单，请筛选条件后重试</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 购买数量 -->
    <!-- <view class="quantity-section">
      <view class="quantity-label">抢单数量</view>
      <view class="quantity-control">
        <view class="quantity-btn" @click="decreaseQuantity">-</view>
        <input type="number" v-model="quantity" :max="orderQuantity" @input="validateQuantity" class="quantity-input" />
        <view class="quantity-btn" @click="increaseQuantity">+</view>
      </view>
    </view> -->

    <!-- 成交记录 -->
    <view class="transaction-section">
      <view class="section-title">成交记录</view>
      <view class="transaction-header">
        <text class="header-item">时间</text>
        <text class="header-item">订单</text>
        <text class="header-item">状态</text>
      </view>
      <view class="transaction-list">
        <view 
          class="transaction-item"
          v-for="(record, index) in transactionRecords" 
          :key="index"
        >
          <text class="transaction-time">{{ record.time }}</text>
          <text class="transaction-order">{{ record.order }}</text>
          <text class="transaction-status">{{ record.status }}</text>
        </view>
      </view>
    </view>

    <!-- 接单规则 -->
    <view class="order-rules-section">
      <view class="rules-header">
        <text class="rules-title">接单规则</text>
        <text class="rules-subtitle">ORDER ACCEPTANCE RULES</text>
      </view>
      
      <view class="rules-content">
        <view class="rules-category">
          <text class="category-title">【渠道行为规范要求】</text>
        </view>
        
        <view class="rule-item">
          <text class="rule-number">一、</text>
          <text class="rule-title">订单统计时间：</text>
        </view>
        <text class="rule-description">昨日（00:00:00-23:59:59）所有做单情况统计</text>
        
        <view class="rule-item">
          <text class="rule-number">二、</text>
          <text class="rule-title">风控处罚：</text>
        </view>
        <text class="rule-description">未达到相关指标将会被渠道封禁（禁止接单）</text>
        <text class="rule-description">请注意：多次触发风控，封禁天数将会增加</text>
        
        <view class="rules-category warning">
          <text class="category-title">【明令禁止&封号行为误碰！！！】</text>
        </view>
        
        <view class="rule-item">
          <text class="rule-number">一、</text>
          <text class="rule-title">禁止行为：</text>
        </view>
        <text class="rule-description">• 禁止假充行为（P图、提前点成功、渠道返销）</text>
        <text class="rule-description">• 禁止联系机主</text>
        <text class="rule-description">• 禁止拆充、少充、多充</text>
        <text class="rule-description">• 禁止放二手单</text>
        <text class="rule-description">• 禁止使用任何<text class="highlight">不合法的充值渠道</text>，禁止使用<text class="highlight">慢充渠道</text></text>
      </view>
    </view>

    <!-- 底部导航 -->
    <view class="bottom-nav">
      <view class="nav-item" @click="goToHome">
        <image class="nav-icon" src="/static/Images/goods/Home.png" mode="aspectFit"></image>
        <text class="nav-text">首页</text>
      </view>
      <view class="nav-item">
        <image class="nav-icon" src="/static/Images/goods/Kefu.png" mode="aspectFit"></image>
        <text class="nav-text">客服</text>
      </view>
      <view class="nav-item" @click="goToOrderList">
        <image class="nav-icon" src="/static/Images/goods/Dingdan.png" mode="aspectFit"></image>
        <text class="nav-text">订单</text>
      </view>
      <view class="action-buttons">
        <view class="action-btn reserve-btn" :class="{ 'reserve-active': availableOrders.length === 0 }" @click="reserveOrder">
          <text class="btn-text">预约订单</text>
        </view>
        <view class="action-btn order-btn" :class="{ 'order-disabled': availableOrders.length === 0 }" @click="confirmGrabOrder">
          <text class="btn-text">立即抢单</text>
        </view>
      </view>
    </view>
    
    <!-- 渠道选择弹窗 -->
    <ChannelSelector 
      :visible="showChannelSelector"
      :defaultSelected="selectedChannelPlatforms"
      @close="closeChannelSelector"
      @confirm="onChannelConfirm"
    />
    
    <!-- 省份选择弹窗 -->
    <ProvinceSelector 
      :visible="showProvinceSelector"
      :defaultSelected="selectedProvinceList"
      @close="closeProvinceSelector"
      @confirm="onProvinceConfirm"
    />
    
    <!-- 自定义金额确认弹窗 -->
    <view v-if="showCustomModal" class="custom-modal-overlay">
      <view class="custom-modal">
        <view class="modal-header">
          <text class="modal-title">确认预约订单收益价格</text>
        </view>
        <view class="modal-content">
          <view class="modal-label">收益价格：</view>
          <view class="modal-price-display">
            <text class="price-text">{{ currentBusPrice }}</text>
            <text class="price-unit">元</text>
          </view>
          <view class="modal-note">
            <text>此价格来自商品规格，不可修改</text>
          </view>
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel-btn" @click="cancelBusMoney">
            <text>取消</text>
          </view>
          <view class="modal-btn confirm-btn" @click="confirmBusMoney">
            <text>确认预约</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ChannelSelector from '@/components/ChannelSelector.vue'
import ProvinceSelector from '@/components/ProvinceSelector.vue'
import { userStorage } from '@/utils/storage.js'
import { goodsApi } from '@/utils/api.js'

export default {
  components: {
    ChannelSelector,
    ProvinceSelector
  },
  data() {
    return {
      activeTopTag: 0,
      topTags: [],
      selectedOperator: null,
      isExpanded: false,
      operators: [],
      categoryList: [],
      phoneNumber: '',
      selectedAmount: null,
      quantity: 1,
      amountOptions: [
        { label: '10元', value: 10, price: '9.50' },
        { label: '10元', value: 10, price: '9.50' },
        { label: '10元', value: 10, price: '9.50' },
        { label: '10元', value: 10, price: '9.50' },
        { label: '10元', value: 10, price: '9.50' },
        { label: '10元', value: 10, price: '9.50' }
      ],
      // 新增商品规格相关数据
      goodsSpecs: [],
      selectedSpec: null,
      selectedSpecPrice: '0.00',
      // 商品列表数据
      goodsList: [],
      orderQuantity: 0,
      orderIds: [], // 存储从grabOrder接口返回的order_ids
      availableOrders: [],
      selectedOrderIndex: 0,
      selectedProvince: 'all',
      selectedChannel: 'all',
      // 渠道选择弹窗相关
      showChannelSelector: false,
      selectedChannelPlatforms: [], // 默认选中全部时为空数组
      // 省份选择弹窗相关
      showProvinceSelector: false,
      selectedProvinceList: [], // 省份多选数组
      // 加载状态管理
      isLoading: false,
      loadingText: '数据加载中...',
      // 自定义弹窗相关
      showCustomModal: false,
      busMoneyInput: '',
      currentBusPrice: '0.00', // 当前选中规格的bus_price
      modalResolve: null,
      transactionRecords: [
        { time: '2025-05-28', order: 'M950', status: '1-成功' },
        { time: '2025-05-28', order: 'M950', status: '1-成功' },
        { time: '2025-05-28', order: 'M950', status: '1-成功' },
        { time: '2025-05-28', order: 'M950', status: '1-成功' },
        { time: '2025-05-28', order: 'M950', status: '1-成功' },
        { time: '2025-05-28', order: 'M950', status: '1-成功' },
        { time: '2025-05-28', order: 'M950', status: '1-成功' }
      ]
    }
  },
  async mounted() {
    await this.getTopTags()
    
    // 自动加载第一个分类的商品数据（倒序后的第一个，即原始数组的最后一个）
    if (this.topTags.length > 0 && this.topTags[this.topTags.length - 1].id) {
      await this.switchTopTag(this.topTags.length - 1)
    }
  },
  computed: {
    // 省份显示文本
    provinceDisplayText() {
      if (this.selectedProvinceList.length === 0) {
        return '选择省份'
      }
      if (this.selectedProvinceList.includes('all')) {
        return '已选择全部'
      }
      return '已选择省份'
    },
    // 省份数量文本
    provinceCountText() {
      if (this.selectedProvinceList.includes('all')) {
        return ''
      }
      return `${this.selectedProvinceList.length}个`
    },
    // 渠道显示文本
    channelDisplayText() {
      if (this.selectedChannelPlatforms.length === 0) {
        return '选择渠道'
      }
      if (this.selectedChannelPlatforms.includes('platform')) {
        return '已选择全部'
      }
      return '已选择渠道'
    },
    // 渠道数量文本
    channelCountText() {
      if (this.selectedChannelPlatforms.includes('platform')) {
        return ''
      }
      return `${this.selectedChannelPlatforms.length}个`
    }
  },
  methods: {
    // 获取顶部标签分类
    async getTopTags() {
      try {
        const response = await goodsApi.getClassByType(1)
        
        if (response && response.code === 1 && Array.isArray(response.data)) {
          this.topTags = response.data
        } else {
          this.topTags = [
            { id: 1, name: '指定平台' },
            { id: 2, name: '10分钟内' },
            { id: 3, name: '24小时内' },
            { id: 4, name: 'PDD平台' }
          ]
        }
      } catch (error) {
        console.error('获取顶部标签失败:', error)
        this.topTags = [
          { id: 1, name: '指定平台' },
          { id: 2, name: '10分钟内' },
          { id: 3, name: '24小时内' },
          { id: 4, name: 'PDD平台' }
        ]
      }
    },


    

    
    // 新增方法：获取单个分类的商品规格
    async getGoodsSpecs(categoryId) {
      this.isLoading = true;
      this.loadingText = '获取商品规格中...';
      try {
        const response = await goodsApi.getGoodsSpecs({
          class_id: categoryId,
          type: 1
        })
        
        const responseData = response
        
        
        // 根据新的接口数据结构解析
        if (responseData && responseData.code === 1 && responseData.data && responseData.data.length > 1) {
          // data是一个包含数组的数组，取第二个数组（索引为1）
          const specsArray = responseData.data[1]
          if (Array.isArray(specsArray)) {
            return specsArray.map(spec => ({
              id: spec.id,
              name: spec.name,
              price: spec.bus_price || '0.00'
            }))
          }
        }
        return []
      } catch (error) {
        console.error(`获取分类${categoryId}的商品规格失败:`, error)
        return []
      } finally {
        this.isLoading = false;
      }
    },
    
    // 清理图标URL，移除反引号和多余空格
    cleanIconUrl(iconUrl) {
      if (!iconUrl) return ''
      return iconUrl.replace(/`/g, '').trim()
    },
    
    // 获取图片数组中的第一张图片
    getFirstImage(imgs) {
      if (!imgs) return ''
      
      try {
        // 如果是数组，直接返回第一个元素
        if (Array.isArray(imgs)) {
          return imgs.length > 0 ? imgs[0] : ''
        }
        
        // 如果是字符串，先检查是否是有效的 JSON
        if (typeof imgs === 'string') {
          // 去除首尾空格
          const trimmed = imgs.trim()
          
          // 如果字符串以 [ 开头，尝试解析为 JSON 数组
          if (trimmed.startsWith('[') && trimmed.endsWith(']')) {
            const parsed = JSON.parse(trimmed)
            return Array.isArray(parsed) && parsed.length > 0 ? parsed[0] : ''
          }
          
          // 如果字符串以 http 开头，直接作为图片 URL 返回
          if (trimmed.startsWith('http')) {
            return trimmed
          }
          
          // 其他情况，尝试解析为 JSON，失败则返回原字符串
          try {
            const parsed = JSON.parse(trimmed)
            return Array.isArray(parsed) && parsed.length > 0 ? parsed[0] : trimmed
          } catch {
            return trimmed
          }
        }
        
        return ''
      } catch (error) {
        console.error('解析图片数组失败:', error)
        // 如果解析失败，且原数据是字符串，尝试直接返回
        return typeof imgs === 'string' ? imgs : ''
      }
    },
    
    // 设置默认运营商数据
    setDefaultOperators() {
      this.operators = [
        { id: 'telecom', name: '电信', label: '电信', class: 'telecom-active' },
        { id: 'unicom', name: '联通', label: '联通', class: '' },
        { id: 'mobile', name: '移动', label: '移动', class: '' },
        { id: 'mango1', name: '芒果', label: '芒果', class: '' },
        { id: 'mango2', name: '芒果', label: '芒果', class: '' }
      ]
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/tasks/index'
      })
    },
    async switchTopTag(index) {
      this.activeTopTag = index
      // 获取选中分类的ID
      const selectedTag = this.topTags[index]
      if (selectedTag && selectedTag.id) {
        try {
          // 调用接口获取该分类下的商品
          const response = await goodsApi.getGoodsByClass(selectedTag.id)
          
          if (response && response.code === 1 && Array.isArray(response.data)) {
            // 无论是否有商品，都要处理响应
            if (response.data.length > 0) {
              // 有商品时的处理逻辑
              this.goodsList = response.data.map(item => ({
                id: item.id,
                goods_name: item.goods_name,
                imgs: item.imgs, // 保持原始imgs字段
                price: item.price,
                class_id: item.class_id,
                specs: item.specs || []
              }))
              
              // 从第一个商品中提取规格数据并设置到 goodsSpecs
              const firstProduct = response.data[0]
              if (firstProduct && firstProduct.specs && Array.isArray(firstProduct.specs)) {
                this.goodsSpecs = firstProduct.specs.map(spec => ({
                  id: spec.id,
                  name: spec.name,
                  price: spec.bus_price, // 使用 bus_price 作为显示价格
                  originalPrice: spec.price,
                  costPrice: spec.cost_price,
                  num: spec.num,
                  specs_id: spec.specs_id,
                  goods_id: spec.goods_id
                }))
              } else {
                this.goodsSpecs = []
              }
              
              // 默认选中第一个运营商
              if (this.goodsList.length > 0) {
                this.selectedOperator = this.goodsList[0].id
              }
            } else {
              // 没有商品时，清空商品列表但保持分类切换状态
              this.goodsList = []
              this.goodsSpecs = []
              this.selectedOperator = null
            }
          } else {
            this.goodsList = []
            this.goodsSpecs = []
            this.selectedOperator = null
          }
        } catch (error) {
          console.error('获取分类商品失败:', error)
          this.goodsList = []
          this.goodsSpecs = []
          this.selectedOperator = null
        }
      }
    },
    selectOperator(operatorId) {
      this.selectedOperator = operatorId
      // 更新运营商激活状态
      this.operators.forEach(op => {
        op.class = op.id === operatorId ? 'telecom-active' : ''
      })
      
      // 从已有的 goodsList 数据中查询对应商品的规格
      const selectedGoods = this.goodsList.find(goods => goods.id === operatorId)
      
      if (selectedGoods && selectedGoods.specs && Array.isArray(selectedGoods.specs)) {
        // 直接使用商品的规格数据
        this.goodsSpecs = selectedGoods.specs.map(spec => ({
          id: spec.id,
          name: spec.name,
          price: spec.bus_price || '0.00',
          originalPrice: spec.price,
          costPrice: spec.cost_price,
          num: spec.num,
          specs_id: spec.specs_id,
          goods_id: spec.goods_id
        }))
      } else {
        this.goodsSpecs = []
      }
      
      // 清空之前选中的规格
      this.selectedSpec = null
      this.selectedSpecPrice = ''
      
      // 强制更新视图以确保数据正确渲染
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    },
    selectAmount(value) {
      this.selectedAmount = value
    },
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--
      }
    },
    increaseQuantity() {
      const currentOrder = this.availableOrders[this.selectedOrderIndex]
      const maxQuantity = currentOrder ? currentOrder.order_ids.length : 0
      
      if (this.quantity < maxQuantity) {
        this.quantity++
      } else {
        uni.showToast({
          title: `最多只能抢${maxQuantity}单`,
          icon: 'none'
        })
      }
    },
    validateQuantity() {
      // 确保数量在有效范围内
      const currentOrder = this.availableOrders[this.selectedOrderIndex]
      const maxQuantity = currentOrder ? currentOrder.order_ids.length : 0
      
      if (this.quantity < 1) {
        this.quantity = 1
      } else if (this.quantity > maxQuantity) {
        this.quantity = maxQuantity
        uni.showToast({
          title: `最多只能抢${maxQuantity}单`,
          icon: 'none'
        })
      }
    },
    // 立即抢单方法
    async confirmGrabOrder() {
      // 如果没有可抢订单，则不执行抢单操作
      if (this.availableOrders.length === 0) {
        uni.showToast({
          title: '暂无可抢订单，请预约订单',
          icon: 'none'
        })
        return
      }
      
      this.isLoading = true
      this.loadingText = '正在抢单中...'
      try {
        // 获取token
        const token = userStorage.getToken()
        if (!token) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }

        // 验证必要参数
        if (!this.selectedSpec) {
          uni.showToast({
            title: '请选择商品规格',
            icon: 'none'
          })
          return
        }

        if (this.quantity <= 0) {
          uni.showToast({
            title: '请输入有效的抢单数量',
            icon: 'none'
          })
          return
        }

        // 获取当前选中订单的order_ids
        const currentOrder = this.availableOrders[this.selectedOrderIndex]
        if (!currentOrder || !currentOrder.order_ids || currentOrder.order_ids.length === 0) {
          uni.showToast({
            title: '暂无可抢订单',
            icon: 'none'
          })
          return
        }

        if (this.quantity > currentOrder.order_ids.length) {
          uni.showToast({
            title: `最多只能抢${currentOrder.order_ids.length}单`,
            icon: 'none'
          })
          return
        }

        // 根据抢单数量取对应数量的order_ids
        const selectedOrderIds = currentOrder.order_ids.slice(0, this.quantity)
        
        // 发送POST请求
        const response = await goodsApi.confirmGrabOrder(selectedOrderIds)
        
        if (response && response.code === 1) {
          uni.showToast({
            title: '抢单成功',
            icon: 'success'
          })
          // 延迟跳转到订单详情页面
           setTimeout(() => {
             uni.navigateTo({
               url: `/pages/order/billorderdetail?id=${selectedOrderIds.join(',')}`
             })
           }, 1500)
        } else {
          uni.showToast({
            title: response.msg || '抢单失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('抢单失败:', error)
        uni.showToast({
          title: '抢单失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },

    // 新增方法：选择商品规格
    async selectSpec(spec) {
      this.isLoading = true;
      this.loadingText = '处理中...';
      try {
        this.selectedSpec = spec.id
        this.selectedSpecPrice = spec.price
        
        // 调用抢单接口获取数量和价格
        await this.getGrabOrderInfo()
      } catch (error) {
        console.error('选择规格失败:', error);
      } finally {
        this.isLoading = false;
      }
    },
    
    // 新增方法：选择订单
    selectOrder(index) {
      this.selectedOrderIndex = index
      const selectedOrder = this.availableOrders[index]
      this.selectedSpecPrice = selectedOrder.price
      this.orderQuantity = selectedOrder.count
      this.orderIds = selectedOrder.order_ids
      // 重置抢单数量
      this.quantity = 1
    },
    
    // 新增方法：预约订单
    async reserveOrder() {
      try {
        // 获取token
        const token = userStorage.getToken()
        if (!token) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }

        // 验证必要参数
        if (!this.selectedSpec) {
          uni.showToast({
            title: '请选择商品规格',
            icon: 'none'
          })
          return
        }

        // 弹窗输入预计获得金额
        const busMoney = await this.showBusMoneyInput()
        if (!busMoney) {
          return // 用户取消输入
        }

        // 用户输入完成后才开始加载
        this.isLoading = true
        this.loadingText = '正在预约订单...'

        // 构建请求参数
        const params = {
          token: token,
          specs_ids: this.selectedSpec, // 规格ID，参数名为specs_ids
          channel_ids: this.selectedChannelPlatforms.includes('all') || this.selectedChannelPlatforms.length === 0 ? [] : this.selectedChannelPlatforms.filter(item => item !== 'all'),
          addresss: this.selectedProvinceList.includes('all') || this.selectedProvinceList.length === 0 ? [] : this.selectedProvinceList.filter(item => item !== 'all'),
          bus_money: busMoney,
          count: 1 // 预约单数默认值1
        }
        
        const response = await goodsApi.reservationGoods({
          specs_ids: this.selectedSpec,
          channel_ids: this.selectedChannelPlatforms.includes('all') || this.selectedChannelPlatforms.length === 0 ? [] : this.selectedChannelPlatforms.filter(item => item !== 'all'),
          addresss: this.selectedProvinceList.includes('all') || this.selectedProvinceList.length === 0 ? [] : this.selectedProvinceList.filter(item => item !== 'all'),
          bus_money: busMoney,
          count: 1
        })
        
        if (response && response.code === 1) {
          uni.showToast({
            title: '预约成功',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: response.msg || '预约失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('预约订单失败:', error)
        uni.showToast({
          title: '预约失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },
    
    // 弹窗确认预计获得金额
    showBusMoneyInput() {
      return new Promise((resolve) => {
        // 获取当前选中规格的bus_price
        const selectedSpecData = this.goodsSpecs.find(spec => spec.id === this.selectedSpec)
        if (selectedSpecData) {
          // 从规格数据中获取原始的bus_price
          this.currentBusPrice = selectedSpecData.price || '0.00'
        } else {
          this.currentBusPrice = '0.00'
        }
        
        this.showCustomModal = true
        this.modalResolve = resolve
      })
    },

    // 确认预约金额
    confirmBusMoney() {
      const money = parseFloat(this.currentBusPrice)
      if (isNaN(money) || money <= 0) {
        uni.showToast({
          title: '规格价格无效，请重新选择规格',
          icon: 'none'
        })
        return
      }
      this.showCustomModal = false
      if (this.modalResolve) {
        this.modalResolve(money)
        this.modalResolve = null
      }
    },

    // 取消预约金额
    cancelBusMoney() {
      this.showCustomModal = false
      if (this.modalResolve) {
        this.modalResolve(null)
        this.modalResolve = null
      }
    },
    
    // 新增方法：获取抢单信息
    async getGrabOrderInfo() {
      this.isLoading = true
      this.loadingText = '获取抢单信息中...'
      try {
        // 过滤掉'all'选项，只保留实际的省份拼音代码
        const filteredProvinceList = this.selectedProvinceList.filter(item => item !== 'all')
        
        // 省份代码到名称的映射
        const provinceCodeToName = {
          'beijing': '北京',
          'tianjin': '天津',
          'shanghai': '上海',
          'chongqing': '重庆',
          'hebei': '河北',
          'shanxi': '山西',
          'liaoning': '辽宁',
          'jilin': '吉林',
          'heilongjiang': '黑龙江',
          'jiangsu': '江苏',
          'zhejiang': '浙江',
          'anhui': '安徽',
          'fujian': '福建',
          'jiangxi': '江西',
          'shandong': '山东',
          'henan': '河南',
          'hubei': '湖北',
          'hunan': '湖南',
          'guangdong': '广东',
          'hainan': '海南',
          'sichuan': '四川',
          'guizhou': '贵州',
          'yunnan': '云南',
          'shaanxi': '陕西',
          'gansu': '甘肃',
          'qinghai': '青海',
          'taiwan': '台湾',
          'neimenggu': '内蒙古',
          'guangxi': '广西',
          'tibet': '西藏',
          'ningxia': '宁夏',
          'xinjiang': '新疆',
          'hongkong': '香港',
          'macao': '澳门'
        }
        
        // 将省份代码转换为省份名称
        const provinceNames = filteredProvinceList.map(code => provinceCodeToName[code] || code)
        
        // 获取token并检查登录状态
        const token = userStorage.getToken()
        const isLoggedIn = userStorage.isLoggedIn()
        
        // 如果未登录，提示用户登录
        if (!token || !isLoggedIn) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          // 可以在这里跳转到登录页面
          uni.navigateTo({ url: '/pages/login/login' })
          return
        }
        
        // 准备请求参数
        const grabOrderParams = {
          token: token,
          specs_ids: [this.selectedSpec],
          channel_ids: this.selectedChannelPlatforms.includes('all') || this.selectedChannelPlatforms.length === 0 ? [] : this.selectedChannelPlatforms.filter(item => item !== 'all'),
          addresss: this.selectedProvinceList.includes('all') || this.selectedProvinceList.length === 0 ? [] : provinceNames,
        }
        const response = await goodsApi.grabOrder(grabOrderParams);
        

        
        const responseData = response
        
        // 处理接口返回的数据
        if (responseData && responseData.code === 1 && responseData.data) {
          // 根据接口返回的数据结构更新显示
          if (Array.isArray(responseData.data) && responseData.data.length > 0) {
            // 存储所有可用订单
            this.availableOrders = responseData.data.map(item => ({
              price: item.price || '0.00',
              count: item.count || 0,
              order_ids: item.order_ids || []
            }))
            
            // 找到最低价格的订单索引
            let lowestPriceIndex = 0
            let lowestPrice = parseFloat(this.availableOrders[0].price)
            
            for (let i = 1; i < this.availableOrders.length; i++) {
              const currentPrice = parseFloat(this.availableOrders[i].price)
              if (currentPrice < lowestPrice) {
                lowestPrice = currentPrice
                lowestPriceIndex = i
              }
            }
            
            // 默认选择最低价格的订单
            this.selectedOrderIndex = lowestPriceIndex
            const selectedOrder = this.availableOrders[lowestPriceIndex]
            this.selectedSpecPrice = selectedOrder.price
            this.orderQuantity = selectedOrder.count
            this.orderIds = selectedOrder.order_ids
          } else {
            // 当data数组为空时显示默认值
            this.availableOrders = []
            this.selectedSpecPrice = '0.00'
            this.orderQuantity = 0
            this.orderIds = []
          }
        } else {
          // 当接口返回异常时显示默认值
          this.availableOrders = []
          this.selectedSpecPrice = '0.00'
          this.orderQuantity = 0
          this.orderIds = []
        }
      } catch (error) {
        uni.showToast({
          title: '获取抢单信息失败',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },
    // 新增方法：选择省份
    selectProvince(province) {
      this.selectedProvince = province
      // 选择全部时清空省份选择列表
      if (province === 'all') {
        this.selectedProvinceList = []
      }
    },
    // 新增方法：显示省份选择弹窗
    showProvinceModal() {
      this.showProvinceSelector = true
    },
    // 关闭省份选择弹窗
    closeProvinceSelector() {
      this.showProvinceSelector = false
    },
    // 确认省份选择
    async onProvinceConfirm(selectedProvinces) {
      this.selectedProvinceList = selectedProvinces
      // 选择省份时重置全部状态
      if (selectedProvinces.length > 0) {
        this.selectedProvince = ''
      }
      // 如果已选择面值，重新获取抢单信息
      if (this.selectedSpec) {
        await this.getGrabOrderInfo()
      }
    },
    // 新增方法：选择渠道
    selectChannel(channel) {
      this.selectedChannel = channel
      // 选择全部时清空渠道选择列表
      if (channel === 'all') {
        this.selectedChannelPlatforms = []
      }
    },
    // 新增方法：显示渠道选择弹窗
    showChannelModal() {
      this.showChannelSelector = true
    },
    // 关闭渠道选择弹窗
    closeChannelSelector() {
      this.showChannelSelector = false
    },
    // 确认渠道选择
    async onChannelConfirm(selectedPlatforms) {
      this.selectedChannelPlatforms = selectedPlatforms
      // 选择渠道时重置全部状态
      if (selectedPlatforms.length > 0) {
        this.selectedChannel = ''
      }

      
      // 如果已选择面值，重新获取抢单信息
      if (this.selectedSpec) {
        await this.getGrabOrderInfo()
      }
    },
    
    // 底部导航跳转方法
    goToHome() {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    },
    
    goToOrderList() {
      uni.navigateTo({
        url: '/pages/order/orderlist'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bill-order-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 80px;
}

.section-header {
  color: #222;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  
  .back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .back-icon {
      width: 24px;
      height: 24px;
    }
  }
  
  .title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }
  
  .placeholder {
    width: 40px;
  }
}

.category-navigation {
  background-color: #fff;
  padding: 16px;
  
  .top-tags-scroll {
    height: 2rem;
    margin-bottom: 20px;
    white-space: nowrap;
    
    .top-tags {
      display: flex;
      flex-wrap: nowrap;
      width: max-content;
      
      .tag-item {
        padding: 4px 16px;
        border: 1px dashed #ccc;
        border-radius: 20px;
        background-color: #f9f9f9;
        margin-left: 5px;
        flex-shrink: 0;
        white-space: nowrap;
        
        &:first-child {
          margin-left: 0;
        }
        
        &.active {
          background-color: #ff4757;
          border-color: #ff4757;
          
          .tag-text {
            color: #fff;
          }
        }
        
        .tag-text {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
  
  .operator-section {
    .operator-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      margin-bottom: 16px;
      
      .operator-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        
        &.active {
          .icon-circle {
            border-color: #ff4757;
            border-style: solid;
          }
          
          .operator-label {
            background-color: #ff4757;
            color: #fff;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: bold;
          }
        }
        
        .operator-icon {
          margin-bottom: 8px;
          
          .icon-circle {
            width: 50px;
            height: 50px;
            border: 2px dashed #ccc;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f9f9f9;
            border-radius: 30px;
            transition: all 0.3s ease;
            
            &.telecom-active {
              border-color: #ff4757;
              border-style: solid;
              background-color: #fff;
              
              .operator-name {
                color: #ff4757;
              }
            }
            
            .operator-name {
               font-size: 12px;
               color: #666;
             }
             
             .category-icon {
               width: 80rpx;
               height: 80rpx;
             }
          }
        }
        
        .operator-label {
          font-size: 10px;
          color: #666;
        }
      }
    }
    
    .expand-section {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px;
      
      .expand-text {
        font-size: 12px;
        color: #999;
      }
      
      .expand-icon {
        font-size: 10px;
        color: #999;
      }
    }
  }
}

.today-stats {
  background-color: #f8f9fa;
  margin: 12px 16px;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  
  .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .stats-title {
    display: flex;
    align-items: center;
    
    .title-icon {
       width: 20px;
       height: 20px;
       margin-left: 8px;
     }
    
    .title-text {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }
  
  .stats-info {
    display: flex;
    align-items: center;
    
    .calculated-text {
      font-size: 12px;
      color: #666;
      margin-right: 5px;
    }
    
    .order-count {
      font-size: 16px;
      font-weight: bold;
      color: #ff4757;
      margin-right: 3px;
    }
    
    .order-unit {
      font-size: 12px;
      color: #333;
    }
  }
  
  .collapse-btn {
    font-size: 12px;
    color: #666;
  }
  
  .stats-content {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      
      .progress-circle {
        position: relative;
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
        
        .circle-bg {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #e9ecef;
          position: relative;
          overflow: hidden;
          
          .circle-fill {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: conic-gradient(#ffc107 0deg, #ffc107 270deg, transparent 270deg);
            transform-origin: center;
          }
        }
        
        .progress-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 14px;
          font-weight: bold;
          color: #333;
        }
      }
      
      .stat-info {
        text-align: center;
        
        .requirement {
          font-size: 10px;
          color: #666;
        }
        
        .success-rate,
        .report-rate,
        .account-rate {
          font-size: 10px;
          color: #ff4757;
          font-weight: 500;
        }
      }
    }
  }
}

.recharge-section {
  background-color: #fff;
  margin: 12px 16px;
  border-radius: 8px;
  padding: 16px;
  
  .section-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
  }
  
  .phone-input {
    margin-bottom: 16px;
    
    .input-field {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      background-color: #f9f9f9;
    }
  }
  
  .amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    
    .amount-item {
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      text-align: center;
      background-color: #fff;
      
      &.selected {
        border-color: #ff4757;
        background-color: #fff5f5;
      }
      
      .amount-value {
        font-size: 14px;
        color: #333;
        margin-bottom: 4px;
      }
      
      .amount-price {
        font-size: 10px;
        color: #ff4757;
      }
    }
  }
  
  /* 结算信息列表样式 */
  .settlement-info {
    margin-top: 20px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
  }
  
  .settlement-header {
    padding: 15px;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .header-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  
  .settlement-list {
    padding: 0;
  }
  
  .settlement-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .settlement-item-row:hover {
    background-color: #f8f9fa;
  }
  
  .settlement-item-row.selected-order {
    background-color: #e8f5e8;
    border-left: 3px solid #4CAF50;
  }
  
  .settlement-item-row:last-child {
    border-bottom: none;
  }
  
  .item-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .item-label {
    font-size: 14px;
    color: #666;
  }
  
  .item-price {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  
  .item-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .item-quantity {
    font-size: 14px;
    color: #666;
  }
  
  .status-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }
  
  .status-selected {
    background-color: #4CAF50;
    border: 2px solid #4CAF50;
  }
  
  .status-unselected {
    background-color: transparent;
    border: 2px solid #ddd;
  }
  
  .status-selected .status-icon {
    color: white;
    font-weight: bold;
    font-size: 12px;
  }
  
  .status-unselected .status-icon {
    color: #ddd;
    font-size: 16px;
  }
  
  .empty-state {
    padding: 30px;
    text-align: center;
  }
  
  .empty-text {
    font-size: 14px;
    color: #999;
  }
  
  .quantity-selector {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
  }
  
  .quantity-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: #f8f8f8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
}

/* 省份选择样式 */
.province-section, .channel-section {
  background-color: #fff;
  margin: 12px 16px;
  border-radius: 8px;
  padding: 16px;
}

.section-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}

.province-selector, .channel-selector {
  display: flex;
  gap: 10px;
}

.province-option, .channel-option {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  background: #f5f5f5;
  color: #666;
  transition: all 0.3s ease;
}

.province-option.selected, .channel-option.selected {
  background: #ff4757;
  color: #fff;
  border-color: #ff4757;
}

.province-count {
  margin-left: 5px;
  font-size: 12px;
}

.channel-icon {
  margin-left: 5px;
  font-size: 12px;
}

.quantity-section {
  background-color: #fff;
  margin: 12px 16px;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .quantity-label {
    font-size: 14px;
    color: #333;
  }
  
  .quantity-control {
    display: flex;
    align-items: center;
    
    .quantity-btn {
      width: 32px;
      height: 32px;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f9f9f9;
      font-size: 18px;
      color: #666;
    }
    
    .quantity-input {
      width: 60px;
      height: 32px;
      text-align: center;
      border: 1px solid #ddd;
      border-left: none;
      border-right: none;
      font-size: 14px;
      color: #000;
    }
  }
}

.transaction-section {
  background-color: #fff;
  margin: 12px 16px;
  border-radius: 8px;
  padding: 16px;
  
  .section-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
  }
  
  .transaction-header {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    
    .header-item {
      flex: 1;
      font-size: 12px;
      color: #999;
      text-align: center;
    }
  }
  
  .transaction-list {
    .transaction-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .transaction-time,
      .transaction-order,
      .transaction-status {
        flex: 1;
        font-size: 12px;
        color: #666;
        text-align: center;
      }
      
      .transaction-status {
        color: #4CAF50;
      }
    }
  }
}

.order-rules-section {
  background-color: #fff;
  margin: 12px 16px;
  border-radius: 8px;
  padding: 16px;
  
  .rules-header {
    text-align: center;
    margin-bottom: 20px;
    
    .rules-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 4px;
    }
    
    .rules-subtitle {
      font-size: 12px;
      color: #999;
      letter-spacing: 1px;
    }
  }
  
  .rules-content {
    .rules-category {
      margin: 16px 0 12px 0;
      
      .category-title {
        font-size: 14px;
        font-weight: bold;
        color: #ff6b35;
      }
      
      &.warning .category-title {
        color: #ff4757;
      }
    }
    
    .rule-item {
      display: flex;
      align-items: flex-start;
      margin: 8px 0 4px 0;
      
      .rule-number {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        margin-right: 4px;
      }
      
      .rule-title {
        font-size: 14px;
        color: #333;
        font-weight: 500;
      }
    }
    
    .rule-description {
      font-size: 13px;
      color: #666;
      line-height: 1.5;
      margin: 4px 0 4px 20px;
      display: block;
      
      .highlight {
        color: #ff4757;
        font-weight: 500;
      }
    }
  }
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  z-index: 999;
  padding: 0 20rpx;
  
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    
    &.active {
      .nav-icon,
      .nav-text {
        color: #ff4757;
      }
    }
    
    .nav-icon {
      width: 40rpx;
      height: 40rpx;
      margin-bottom: 8rpx;
    }
    
    .nav-text {
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 20rpx;
    margin-left: 20rpx;
  }
  
  .action-btn {
    padding: 16rpx 32rpx;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .reserve-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
  }
  
  .order-btn {
    background: #ff4757;
    color: #fff;
    transition: all 0.3s ease;
  }

  .order-btn.order-disabled {
    background: #cccccc;
    color: #999999;
    cursor: not-allowed;
  }

  .reserve-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
  }

  .reserve-btn.reserve-active {
    background: #ff4757;
    color: white;
    box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
    border: 1px solid #f44336;
  }
  
  .btn-text {
    font-size: 28rpx;
    font-weight: 500;
  }
  
  .reserve-btn .btn-text {
    color: #333;
  }

  .reserve-btn.reserve-active .btn-text {
    color: #fff;
  }
  
  .order-btn .btn-text {
    color: #fff;
  }

  .order-btn.order-disabled .btn-text {
    color: #999999;
  }
}
/* 加载动效样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-content {
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 12rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 200rpx;
}

.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

.loading-text {
  color: #ffffff;
  font-size: 28rpx;
  text-align: center;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 自定义弹窗样式 */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(128, 128, 128, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.custom-modal {
  background-color: #fff;
  border-radius: 12rpx;
  width: 600rpx;
  max-width: 90%;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
}

.modal-header {
  padding: 40rpx 40rpx 20rpx 40rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.modal-content {
  padding: 40rpx;
}

.modal-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  display: block;
}

.modal-input {
   width: 90%;
   height: 80rpx;
   border: 2rpx solid #e0e0e0;
   border-radius: 8rpx;
   padding: 0 20rpx;
   font-size: 32rpx;
   color: #333;
   background-color: #f9f9f9;
 }

.modal-input:focus {
  border-color: #ff4757;
  background-color: #fff;
}

.modal-price-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: 20rpx 0;
  padding: 30rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  border: 2rpx solid #e9ecef;
}

.price-text {
  font-size: 48rpx;
  font-weight: 600;
  color: #ff4757;
}

.price-unit {
  font-size: 28rpx;
  color: #666;
  margin-left: 8rpx;
}

.modal-note {
  text-align: center;
  margin-top: 20rpx;
}

.modal-note text {
  font-size: 24rpx;
  color: #999;
}

.modal-footer {
  display: flex;
  border-top: 1rpx solid #f0f0f0;
}

.modal-btn {
  flex: 1;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  cursor: pointer;
}

.cancel-btn {
  color: #666;
  background-color: #f5f5f5;
  border-right: 1rpx solid #f0f0f0;
}

.cancel-btn:active {
  background-color: #e8e8e8;
}

.confirm-btn {
  color: #fff;
  background-color: #ff4757;
}

.confirm-btn:active {
  background-color: #e63946;
}

/* 商品展示区域样式 */
.goods-section {
  margin: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.goods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-top: 20rpx;
}

.goods-item {
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  border: 1rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.goods-item:active {
  background-color: #e9ecef;
  transform: scale(0.98);
}

.goods-image-container {
  width: 100%;
  height: 120rpx;
  margin-bottom: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 8rpx;
  overflow: hidden;
}

.goods-image {
  width: 100%;
  height: 100%;
}

.goods-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  color: #999;
  font-size: 24rpx;
}

.goods-info {
  text-align: center;
}

.goods-name {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goods-price {
  display: block;
  font-size: 28rpx;
  color: #ff4757;
  font-weight: 600;
}

</style>